<template>
	<!-- 购物车 -->
	<view style="padding-bottom: 138rpx;">
		<view class="Caetbox" v-if="goodsList.length">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item, index) in goodsList" :key="index" :right-options="options"
					@click="swipeClick(index)">
					<view class="item u-border-bottom">
						<view class="itembox">
							<u-checkbox-group class="checkboxbox">
								<u-checkbox v-model="item.checked" shape="circle" @change='checkedFn' :name="item.id">
								</u-checkbox>
							</u-checkbox-group>
							<view class="imgbox" @click="navTo('../homePage/mall/goods/goods?id='+item.sku_id)">
								<image class="img" :src="item.cover" mode=""></image>
							</view>
							<view class="title-wrap"  @click="navTo('../homePage/mall/goods/goods?id='+item.sku_id)">
								<text class="title">{{item.goods_name}}</text>
								<view class="figure">
									商品编号: {{item.id}}
								</view>
							</view>
						</view>
						<view class="pricebox">
							<view class="price">
								¥ {{item.price}}
							</view>
							<u-number-box style="margin-right: 20rpx;" v-model='item.goods_num' @change="valChange"
								:min="1" :index='item.sku_id'></u-number-box>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>

		<view class="notice" v-else>
			<u-empty mode="car"></u-empty>
		</view>

		<!-- 底部 -->
		<view class="tabbox" v-if="goodsList.length">
			<view class="names">
				<u-checkbox-group>
					<u-checkbox class="checkboxs" v-model="checkedAll" shape="circle" @change='changeAll'>全选
					</u-checkbox>
				</u-checkbox-group>
				<view class="all">
					<text>合计:</text>
					<view class="alls">
						¥ {{totalPrice.toFixed(2)}}
					</view>
				</view>
				<view class="btn" @click="submitPay">去结算</view>
			</view>
		</view>
		<u-modal v-model="modalshow" title='' content='确认要删除该宝贝吗？' :show-cancel-button='true' confirm-text='删除'
			confirm-color='#FF4141' @confirm='confirmDel'></u-modal>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				goodsList: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
					}
				}],
				checkedAll: false, // 全选
				modalshow: false,
				skuId: '',
				totalPrice: 0, // 总价
				oldList: [],
				cartId: ''
			}
		},
		onShow() {
			this.getMyshopCar()
			this.checkedAll = false
			this.totalPrice = 0
		},
		methods: {
      navTo(url){
        uni.navigateTo({
                         url: url
                       })
      },
			// 结算
			submitPay() {
				let list = []
				this.goodsList.forEach(k => {
					if (k.checked) {
						list.push(1)
					} else {
						list.push(0)
					}
				})
				if (list.indexOf(1) == -1) {
					uni.showToast({
						title: '请选择结算商品',
						icon: 'none'
					})
				} else {
					let cartId = ''
					this.goodsList.forEach(item => {
						if (item.checked) {
							cartId += item.id + ','
						}
					})
					let checkedId = cartId.substring(0, cartId.lastIndexOf(','))
					this.$store.commit('changeCartId', checkedId)
					uni.navigateTo({
						url: '../homePage/mall/order/order?cart_id='+checkedId
					})
				}
			},
			// 确认删除
			async confirmDel() {
				let res = await myRequest.delMycart({
					cart_id: this.cartId
				})
				if (res.status) {
					uni.showToast({
						title: '删除成功'
					})
					this.getMyshopCar()
					this.checkedAll = false
					this.totalPrice = 0
				}
			},
			swipeClick(index) {
				this.cartId = this.goodsList[index].id
				this.modalshow = true
			},
			//全选
			changeAll(e) {
				this.totalPrice = 0
				this.goodsList.forEach(item => {
					if (e.value) {
						item.checked = true
						let price = Number(item.price)
						let num = Number(item.goods_num)
						let total = price * num
						this.totalPrice += total
					} else {
						item.checked = false
						this.totalPrice = 0
					}
				})
				this.oldList = []
			},
			// 单选
			checkedFn(e) {
				this.goodsList.forEach(item => {
					if (item.id == e.name) {
						item.checked = e.value
						if (item.checked) {
							let price = Number(item.price)
							let num = Number(item.goods_num)
							let total = price * num
							this.totalPrice += total
						} else {
							let price = Number(item.price)
							let num = Number(item.goods_num)
							let total = price * num
							this.totalPrice -= total
						}
						let list = []
						this.goodsList.forEach(k => {
							if (k.checked) {
								list.push(1)
							} else {
								list.push(0)
							}
						})
						if (list.indexOf(0) != -1) {
							this.checkedAll = false
						} else {
							this.checkedAll = true
						}
					}
				})
				this.oldList = []
			},
			// 我的购物车
			async getMyshopCar() {
				let res = await myRequest.getMycart()
				if (res.status) {
					res.data.forEach(item => {
						item.checked = false
					})
					this.goodsList = res.data
          this.goodsList.forEach(item=>{
            item.goods_num = Number(item.goods_num)
          })
				}
			},
			// 更新购物车
			async valChange(e) {
				this.totalPrice = 0
				this.checkedAll = false
				this.skuId = e.index
				let res = await myRequest.addMycart({
					sku_id: this.skuId,
					goods_num: e.value
				})
				if (res.status) {
					this.getMyshopCar()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-icon-disabled {
		background: #FFFFFF !important;
		width: 54rpx;
		height: 44rpx;
		border: 2rpx solid #F2F2F2;
		opacity: 1;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		border-right: 0;
	}

	/deep/.u-icon-minus {
		background: #FFFFFF !important;
		width: 54rpx;
		height: 44rpx;
		border: 2rpx solid #F2F2F2;
		opacity: 1;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		border-right: 0;
	}


	/deep/.u-icon-plus[data-v-18418972] {
		background: #FFFFFF !important;
		width: 54rpx;
		height: 44rpx;
		border: 2rpx solid #F2F2F2;
		opacity: 1;
		border-radius: 0rpx 30rpx 30rpx 0rpx;
		border-left: 0;
	}

	/deep/.u-number-input[data-v-18418972] {
		background: #FFFFFF !important;
		width: 54rpx;
		height: 44rpx;
		border: 2rpx solid #F2F2F2;
		box-sizing: border-box;
	}

	/deep/.u-number-input[data-v-18418972] {
		margin: 0;
	}

	.tabbox {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
	}

	.pricebox {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;

		.price {
			margin-left: 50rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 38rpx;
			color: #FF7C0A;
		}
	}

	.Caetbox {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 32rpx auto 0;
		overflow: hidden;
	}

	// .name {
	// 	position: relative;
	// 	top: 30rpx;
	// 	left: 20rpx;
	// 	font-size: 28rpx;
	// 	font-family: Segoe UI;
	// 	font-weight: 400;
	// 	line-height: 34rpx;
	// 	color: #000;
	// 	opacity: 1;
	// 	margin: 30rpx 0;
	// }

	.names {
		display: flex;
		font-size: 28rpx;
		font-family: Segoe UI;
		font-weight: 400;
		line-height: 34rpx;
		color: #000000;
		margin-top: 30rpx;
		padding: 0 32rpx;

		.btn {
			width: 160rpx;
			height: 68rpx;
			background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
			border-radius: 16rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 50rpx;
			line-height: 68rpx;
			text-align: center;
			margin-left: auto;
		}

		.all {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
			margin-left: 148rpx;

			.alls {
				font-size: 36rpx;
				font-family: Segoe UI;
				font-weight: 400;
				line-height: 60rpx;
				color: #FF7C0A;
				margin-left: 20rpx;
			}

		}


	}

	/deep/.u-checkbox__label[data-v-532d01c7] {
		margin-left: 20rpx;
	}

	.item {
		padding: 20rpx;
		width: 694rpx;
	}

	.itembox {
		display: flex;
	}

	.title-wrap {
		width: 438rpx;
		margin-left: 20rpx;
	}

	.imgbox {
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.checkboxbox {
		width: 50rpx;
		height: 160rpx;
		margin-top: 30rpx;
	}

	.figure {
		font-size: 24rpx;
		font-family: Arial;
		font-weight: 400;
		line-height: 28rpx;
		color: #999999;
		margin-top: 12rpx;
		line-height: 50rpx;
	}

	.title {
		text-align: left;
		font-size: 30rpx;
		font-family: Segoe UI;
		font-weight: 400;
		line-height: 38rpx;
		color: #333333;
	}

	.notice {
		padding-top: 384rpx;
	}
</style>
